---
title: Schemat Kolorów
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Karta Schemat Kolorów

Reprezentuje różne schematy kolorów i jest specjalnie dopasowany do jasnych i ciemnych motywów.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ                                     | Opis                                                                                  | Domyślny |
| -------------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------- | -------- |
| wariant                                | ciąg znaków                             | Wariant schematu kolorów. Opcje obejmują `Ciemny`, `Jasny` i `System` | jasny    |
| wybrany                                | boolean                                 | Jeśli `true`, wyświetla znacznik wyboru, aby wskazać wybrany schemat kolorów          |          |
| dodatkowe właściwości                  | `React.ComponentPropsWithoutRef<'div'>` | Standardowe właściwości elementu HTML `div`                                           |          |

</Tab>

</Tabs>

## Wybór Schematów Kolorów

Pozwala użytkownikom wybierać między różnymi schematami kolorów.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ               | Opis                                                                           |
| -------------------------------------- | ----------------- | ------------------------------------------------------------------------------ |
| wartość                                | `Schemat Kolorów` | Obecnie wybrany schemat kolorów                                                |
| onChange                               | funkcja           | Funkcja zwrotna, którą chcesz wywołać, gdy użytkownik wybierze schemat kolorów |

</Tab>

</Tabs>
